import { Directive, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';
@Directive({
  selector: 'button[ion-button]'
})
export class ButonDirective implements OnInit {
  @Input() color?: string;
  @Input() expand?: string;
  @Input() size?: string;
  buttonColors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info'];
  buttonSizes = {
    large: 'lg',
    small: 'sm'
  };
  constructor(private ele: ElementRef, private render: Renderer2) {
    this.setDefaultClass();
  }
  ngOnInit(): void {
   this.setOtherClass();
  }

  setDefaultClass() {
    const el = this.ele.nativeElement;
    this.render.addClass(el, 'btn');
  }

  setOtherClass() {
    const el = this.ele.nativeElement;
    const inClassList = this.buttonColors.includes(this.color);
    const btnClass = inClassList ? this.color : 'primary';
    this.render.addClass(el, `btn-${btnClass}`);
    if (this.expand && this.expand === 'block') {
      this.render.addClass(el, `btn-block`);
    }
    const sizeClass = this.buttonSizes[this.size];
    if (sizeClass) {
      this.render.addClass(el, `btn-${sizeClass}`);
    }
  }
}
